<script setup>

import PayAttention from "@/components/components/payAttention.vue";
import TopRated from "@/components/components/topRated.vue";
import {onMounted, onUnmounted, ref} from "vue";
import * as echarts from "echarts";

const xData = ref(['contest1', 'contest1', 'contest1', 'contest1', 'contest1', 'contest1', 'contest1', 'contest1', 'contest1', 'contest1'])
const yData = ref([123, 332, 123, 332, 423, 432, 123, 321, 432, 543])
let myChart = null
onMounted(() => {
  myChart = echarts.init(document.getElementById('chart1'));
  myChart.setOption({
    title: {
    },
    tooltip: {},
    xAxis: {
      data: xData.value
    },
    axisLabel: {
      formatter: function (value) {
        if (value.length > 10) {
          return value.substr(0, 5) + '...';
        } else {
          return value;
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'rate',
        type: 'line',
        data: yData.value
      }
    ]
  });

  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  // 移除监听
  window.removeEventListener('resize', resizeChart);
});

const resizeChart = () => {
  if (myChart) {
    myChart.resize();
  }
}

</script>

<template>
<body>
  <div class="container">
    <div class="left">
      <div class="lUp">
        <div class="LUL">
          <img class="avatar" src="@/assets/QQ图片20231211172036.jpg" alt="">
          <h1 style="text-align: center">Edit</h1>
        </div>
        <div class="LUR">
          <h1 style="color: #5470C6">
            User Name
          </h1>
          <h1 style="color: #5470C6">
            Email: 11111111
          </h1>
        </div>
      </div>
      <div class="LD">
        <div id="chart1" class="chart"></div>
        <div class="table">
          <table class="lastTable" border="1">
            <thead>
            <tr>
              <th>
                <h3 style="margin: 0">#</h3>
              </th>
              <th>
                <h3 style="margin: 0">Contest</h3>
              </th>
              <th>
                <h3 style="margin: 0">Date</h3>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>last contest</td>
              <td>date</td>
            </tr>
            <tr>
              <td>1</td>
              <td>last contest</td>
              <td>date</td>
            </tr>
            <tr>
              <td>1</td>
              <td>last contest</td>
              <td>date</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="right">
      <pay-attention></pay-attention>
      <top-rated style="margin-top: 1rem"></top-rated>
    </div>
  </div>
</body>
</template>

<style scoped>
.container{
  width: 100%;
  display: flex;
  .left{
    width: 75%;
    display: flow;
    .lUp{
      display: flex;
      .LUL{
        width: 40%;
        text-align: center;
        background-color: #2D333B;
        padding: 2rem;
        border-radius: 10px;
        .avatar{
          width: 20rem;
          object-fit: contain;
        }
      }
      .LUR{
        margin-left: 1rem;
        padding: 1rem;
        width: 60%;
        background-color: #2D333B;
        border-radius: 10px;
      }
    }
  }

  .right{
    width: 23%;
    padding: 1%;
  }
}

h1{
  color: #5470C6;
  text-align: left;
}

.chart {
  margin-top: 1rem;
  background-color: #2D333B;
  width: 100%;
  height: 40vh;
  border-radius: 10px;
}
table{
  width: 100%;
  margin-top: 1rem;
  color: #5C7BD9;
}
</style>